<template>
  <div class='container'>
    <el-dialog
      :title="formTitle"
      :visible="showDialog"
      width="70%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form
        ref="addForm"
        :model="articleForm"
        :rules="rules"
      >
        <el-form-item
          label="标题"
          prop="title"
        >
          <el-input
            v-model="articleForm.title"
            placeholder="输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="内容"
          prop="articleBody"
        >
          <quill-editor
            v-model="articleForm.articleBody"
            @blur="$refs.addForm.validateField('articleBody')"
            style="height: 200px; display: inline-block"
          ></quill-editor>
        </el-form-item>
        <el-form-item
          label="视频地址"
          prop="videoURL"
        >
          <el-input
            v-model="articleForm.videoURL"
            placeholder="输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click.native="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          @click.native="addArt"
        >确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import { add, update as updateList } from '@/api/hmmm/articles.js'
import { quillEditor } from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: 'ArticlesAdd',
  components: {
    quillEditor
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    listForm: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    listForm (newval) {
      this.articleForm = newval
    }
  },
  computed: {
    formTitle () {
      return this.articleForm.id ? '编辑文章' : '添加文章'
    }
  },
  data () {
    return {
      articleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: ['blur', 'change']
          }
        ],
        articleBody: [
          {
            required: true,
            message: '内容不能为空',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    // 关闭弹层
    closeDialog () {
      this.$emit('update:showDialog', false)
      this.$refs.addForm.resetFields()
      this.articleForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 添加弹层
    addArt () {
      this.$refs.addForm.validate(async (flag) => {
        if (!flag) return
        if (this.articleForm.id) {
          await updateList(this.articleForm)
          this.$message.success('恭喜！修改成功')
        } else {
          await add(this.articleForm)
          this.$message.success('恭喜！添加成功')
        }
        this.$parent.getArticleList()
        this.closeDialog()
      })
    }

    //   handleClose (done) {
    //     this.$confirm('确认关闭？')
    //       .then((_) => {
    //         done()
    //       })
    //       .catch((_) => {})
    //   }
  }
}
</script>

<style scoped lang='less'></style>
